<template>
    <BasicLayout>
        <template #wrapper>
            <el-alert
                type="warning"
                show-icon
                :closable="false"
                class="warning"
            >
                <template v-slot:title>
                    <span style="font-size: 16px">警告</span>
                </template>
                <span style="color: black; font-size: 16px"
                    >同一个时间只能有一个显示中的公告，请注意配置的展示时间</span
                >
            </el-alert>
            <el-card class="box-card">
                <div class="header">
                    <span>公告列表</span>
                    <div class="right">
                        <el-select
                            v-model="is_public"
                            class="changeState"
                            @change="search"
                        >
                            <el-option
                                v-for="item in states"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                        <el-button
                            class="newAnnouncement"
                            type="success"
                            @click="openDialog"
                        >
                            新建公告
                        </el-button>
                    </div>
                </div>
                <el-table :data="listData">
                    <el-table-column prop="id" label="id" />
                    <el-table-column prop="subject" label="标题" />
                    <el-table-column prop="body" label="内容" />
                    <el-table-column prop="starttime" label="开始时间" />
                    <el-table-column prop="endtime" label="结束时间" />
                    <el-table-column prop="createdAt" label="创建时间" />
                    <el-table-column prop="updatedAt" label="更新时间" />
                    <el-table-column prop="creator" label="创建人" />
                    <el-table-column prop="userids" label="发送用户" />
                    <el-table-column prop="displayorder" label="显示顺序" />
                    <el-table-column label="状态">
                        <template #default="{ row }">
                            <span
                                v-if="row.isPublic === '0'"
                                style="color: #00ff00"
                                >展示</span
                            >
                            <span
                                v-if="row.isPublic === '1'"
                                style="color: #e66a6a"
                                >未展示</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button
                                type="text"
                                size="default"
                                @click="openDialog(row.id)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                type="text"
                                style="color: #e66a6a"
                                size="default"
                                @click="del(row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="pageInfo.page"
                    v-model:limit="pageInfo.pageSize"
                    @pagination="pageChange"
                />
                <Modal
                    :id="id"
                    :dialog-visible="dialogVisible"
                    @close="close"
                />
            </el-card>
        </template>
    </BasicLayout>
</template>
<script>
import Modal from './components/index.vue';
import { noticeDel, noticeList } from '@/api/admin/notice';
export default {
    components: { Modal },
    data() {
        return {
            total: 0,
            is_public: '2',
            states: [
                { key: '0', value: '展示' },
                { key: '1', value: '不展示' },
                { key: '2', value: '全部' },
            ],
            listData: [],
            id: -1,
            dialogVisible: false,
            pageInfo: {
                page: 1,
                pageSize: 10,
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        search() {
            this.pageInfo.page = 1;
            this.getList();
        },
        pageChange(info) {
            const { page, limit } = info;
            this.pageInfo = {
                page: page,
                pageSize: limit,
            };
            this.getList();
        },
        async getList() {
            try {
                const { message } = await noticeList({
                    is_public: this.is_public,
                    ...this.pageInfo,
                });
                this.listData = message.list;
                this.total = message.totalPage * 1;
            } catch (e) {
                console.warn('e', e);
            }
        },
        openDialog(val) {
            this.id = val * 1;
            this.dialogVisible = true;
        },
        close() {
            this.id = -1;
            this.dialogVisible = false;
            this.getList();
        },
        del(id) {
            this.$confirm('公告删除后无法恢复，请谨慎操作', '确认删除公告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    try {
                        await noticeDel({ id: id });
                        this.getList();
                    } catch (e) {
                        console.warn('e', e);
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
    },
};
</script>
<style scoped lang="scss">
.box-card {
    margin-top: 10px;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .changeState {
            margin-right: 30px;
        }
    }
    .newAnnouncement {
        border-radius: 0;
    }
}
</style>
